<template>
  <el-drawer
    :wrapper-closable="false"
    title="详情"
    :size="500"
    :visible.sync="innerValue"
    @open="onDrawerOpen"
    @closed="onDrawerClosed"
  >
    <div class="relative flex h-full flex-col space-y-[24px] p-[16px] pt-[0px]">
      <div class="flex min-h-0 flex-1 flex-col space-y-[24px] overflow-y-auto">
        <div>
          <div class="common-secondary-bg">
            <div class="common-secondary-title"></div>
            用户基本信息
          </div>
          <el-form
            ref="form"
            class="tableBox__form"
            :model="detail"
            size="small"
            status-icon
            label-position="right"
            label-width="120px"
          >
            <el-form-item label="用户账号">
              <div>{{ detail[PROPS.userAccount] }}</div>
            </el-form-item>
            <el-form-item label="用户姓名">
              <div>{{ detail[PROPS.userName] }}</div>
            </el-form-item>
            <el-form-item label="性别">
              <div>
                {{
                  detail[PROPS.gender] &&
                  $store.state.data.OPTION_MAP[OPTION_KEYS.gender][detail[PROPS.gender]] &&
                  $store.state.data.OPTION_MAP[OPTION_KEYS.gender][detail[PROPS.gender]].label
                }}
              </div>
            </el-form-item>
            <el-form-item label="手机号" :prop="PROPS.phoneNumber">
              <div>{{ detail[PROPS.phoneNumber] }}</div>
            </el-form-item>
            <el-form-item label="职务" :prop="PROPS.title">
              <div>{{ detail[PROPS.title] }}</div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <footer class="common-drawer-footer">
        <t-button type="default" class="common-search-btn" style="margin-left: 0" plain @click="innerValue = false"
          >关 闭</t-button
        >
      </footer>
    </div>
  </el-drawer>
</template>

<script>
import config from "../config";
import vModelMixin from "@/mixin/v-model";
import { systemUserDetail } from "@/api/user";

export default {
  name: "DetailDrawerList",
  components: {},
  mixins: [vModelMixin],
  props: {
    id: {
      type: [String, Number],
      required: true,
    },
  },
  data() {
    return {
      detail: {},
      ...config,
    };
  },
  computed: {},
  methods: {
    onDrawerOpen() {
      if (this.id) {
        systemUserDetail({ id: this.id }).then((value) => {
          this.detail = { ...value };
        });
      }
      this.$nextTick(() => this.$refs["form"].clearValidate());
    },

    onDrawerClosed() {},
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label,
::v-deep .el-form-item__content {
  height: 22px;
  line-height: 22px;
}

::v-deep .el-form-item__label {
  font-size: 14px;
  font-weight: 400;
  color: rgb(0 0 0 / 0.85);
}

::v-deep .el-form-item__content {
  font-size: 14px;
  font-weight: 400;
  color: rgb(0 0 0 / 0.65);
}
</style>
